<!--价格排名总组件 未使用 -->
<template>
  <div class="app-wrapper">
    <!-- 主内容区域 -->
    <div id="page-wrapper" class="content-center">
      <div id="page-inner">
        <div class="row">
          <div class="col-md-12">
            <h3 class="page-header">价格排名展示</h3>
          </div>
        </div>

        <div class="row">
          <div class="col-md-6 col-sm-12 col-xs-12">
            <div class="panel panel-default">
              <div class="panel-body">
                <div id="main1" class="chart-container"></div>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-sm-12 col-xs-12">
            <div class="panel panel-default">
              <div class="panel-body">
                <div id="main2" class="chart-container"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-6 col-sm-12 col-xs-12">
            <div class="panel panel-default">
              <div class="panel-body">
                <div id="main3" class="chart-container"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'PriceRanking',
  data() {
    return {
      chart1: null,
      chart2: null,
      chart3: null,
      // 前端假数据
      data1: [],
      data2: [],
      data3: []
    }
  },
  mounted() {
    this.initCharts()
    this.loadFakeData()
  },
  beforeDestroy() {
    if (this.chart1) this.chart1.dispose()
    if (this.chart2) this.chart2.dispose()
    if (this.chart3) this.chart3.dispose()
  },
  methods: {
    // 初始化图表
    initCharts() {
      this.chart1 = echarts.init(document.getElementById('main1'))
      this.chart2 = echarts.init(document.getElementById('main2'))
      this.chart3 = echarts.init(document.getElementById('main3'))
    },


    loadFakeData() {
      this.$request.get('queryGMVOrder').then(response => {
        console.log("queryGMVOrder"+ response)
        if (response && Array.isArray(response)) {
          this.data1 = response
              .filter(item => item.quarter) // 过滤quyu为空的记录
              .map(item => ({
                ...item,
                gmvCount: item.gmvCount !== null ? item.gmvCount : 0,
                gmvAmount: item.gmvAmount !== null ? item.gmvAmount : 0
              }))
        } else {
          // 处理非数组数据或空数据
          this.data1 = []
          console.warn('返回数据格式不正确或为空', response.data)
        }
        this.renderChart1(this.data1)
      })
      //区域排名获取数据
      this.$request.get('queryGMVOrder02').then(response => {
        console.log("queryGMVOrder02"+ response)
        if (response && Array.isArray(response)) {

          this.data2 = response
              .filter(item => item.quarter) // 过滤quyu为空的记录
              .map(item => ({
                ...item,
                gmvCount: item.gmvCount !== null ? item.gmvCount : 0,
                gmvAmount: item.gmvAmount !== null ? item.gmvAmount : 0
              }))
        } else {
          // 处理非数组数据或空数据
          this.data2 = []
          console.warn('返回数据格式不正确或为空', response.data)
        }
        this.renderChart2(this.data2)
      })


      //月份排名获取数据
      this.$request.get('queryGMVOrder03').then(response => {
        console.log("queryGMVOrder03"+ response)
        if (response && Array.isArray(response)) {

          this.data3 = response
              .filter(item => item.quarter) // 过滤quyu为空的记录
              .map(item => ({
                ...item,
                gmvCount: item.gmvCount !== null ? item.gmvCount : 0,
                gmvAmount: item.gmvAmount !== null ? item.gmvAmount : 0
              }))
        } else {
          // 处理非数组数据或空数据
          this.data3 = []
          console.warn('返回数据格式不正确或为空', response.data)
        }
        this.renderChart3(this.data3)
      })

      // 渲染图表
      this.renderChart1(this.data1)
      this.renderChart2(this.data2)
      this.renderChart3(this.data3)
    },

    // 渲染第一个图表 - 房源价格排名
    renderChart1(data) {
      if (!this.chart1) return

      const xdata = data.map(item => item.quarter)
      const ycount = data.map(item => item.gmvCount)
      const yamount = data.map(item => item.gmvAmount)

      const option = {
        title: { text: '房源价格排名', subtext: '' },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross', label: { backgroundColor: '#283b56' } }
        },
        legend: { data: ['房源数量', '单价'], top: 10 },
        toolbox: { show: true, feature: { dataView: { readOnly: false }, restore: {}, saveAsImage: {} } },
        dataZoom: { show: false, start: 0, end: 100 },
        xAxis: [
          { type: 'category', boundaryGap: true, data: xdata }
        ],
        yAxis: [
          { type: 'value', scale: true, name: '房源数量' },
          { type: 'value', scale: true, name: '单价' }
        ],
        series: [
          { name: '单价', type: 'bar', yAxisIndex: 1, data: yamount },
          { name: '房源数量', type: 'line', data: ycount }
        ]
      }

      this.chart1.setOption(option)
    },

    // 渲染第二个图表 - 区域价格排名
    renderChart2(data) {
      if (!this.chart2) return
      const xdata = data.map(item => item.quarter)
      const ycount = data.map(item => item.gmvCount)
      const yamount = data.map(item => item.gmvAmount)

      const option = {
        title: { text: '区域价格排名', subtext: '' },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross', label: { backgroundColor: '#283b56' } }
        },
        legend: { data: ['房源数量', '单价'], top: 10 },
        toolbox: { show: true, feature: { dataView: { readOnly: false }, restore: {}, saveAsImage: {} } },
        dataZoom: { show: false, start: 0, end: 100 },
        xAxis: [
          { type: 'category', boundaryGap: true, data: xdata }
        ],
        yAxis: [
          { type: 'value', scale: true, name: '房源数量' },
          { type: 'value', scale: true, name: '单价' }
        ],
        series: [
          { name: '单价', type: 'bar', yAxisIndex: 1, data: yamount },
          { name: '房源数量', type: 'line', data: ycount }
        ]
      }

      this.chart2.setOption(option)
    },

    // 渲染第三个图表 - 月份价格排名
    renderChart3(data) {
      if (!this.chart3) return
      const xdata = data.map(item => item.quarter)
      const ycount = data.map(item => item.gmvCount)
      const yamount = data.map(item => item.gmvAmount)

      const option = {
        title: { text: '月份价格排名', subtext: '' },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross', label: { backgroundColor: '#283b56' } }
        },
        legend: { data: ['房源数量', '单价'], top: 10 },
        toolbox: { show: true, feature: { dataView: { readOnly: false }, restore: {}, saveAsImage: {} } },
        dataZoom: { show: false, start: 0, end: 100 },
        xAxis: [
          { type: 'category', boundaryGap: true, data: xdata }
        ],
        yAxis: [
          { type: 'value', scale: true, name: '房源数量' },
          { type: 'value', scale: true, name: '单价' }
        ],
        series: [
          { name: '单价', type: 'bar', yAxisIndex: 1, data: yamount },
          { name: '房源数量', type: 'line', data: ycount }
        ]
      }

      this.chart3.setOption(option)
    }
  }
}
</script>

<style scoped>
/* 引入外部样式 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

.app-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
}

/* 主内容区域样式 */
#page-wrapper.content-center {
  max-width: 1200px;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

#page-inner {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 30px;
  box-sizing: border-box;
}

.page-header {
  margin: 0 0 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.row {
  margin-bottom: 30px;
}

.panel {
  margin-bottom: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.panel-body {
  padding: 20px;
}

.chart-container {
  width: 100%;
  height: 380px;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .app-wrapper {
    padding: 10px;
  }

  #page-inner {
    padding: 20px 15px;
  }

  .chart-container {
    height: 300px;
  }
}
</style>